<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级竞赛</title>
    <link rel="stylesheet" href="./bjjs.css">
</head>

<body>
    <header class="gd"> 
        <h1>班级竞赛</h1>
        <p>软件技术2405班</p>
        <p>2025年05月09日</p>
    </header>
    <nav>
           <a href="#jsjs">竞赛介绍</a>
           <a href="#csxs">参赛选手</a>
           <a href="#jsgz">竞赛规则</a>
           <a href="#cjzs">成绩展示</a>
    </nav>

    <main>

        <section id="jsjs">
            <h2>竞赛介绍</h2>
            <p>本次班级Web编程大赛旨在提高同学们的网页设计与开发能力,培养团队协作精神,同时为校级比赛选拔优秀人才。</p>
            <p>比赛要求参赛者在规定时间内完成一个符合W3C标准的网页作品,主题为"班级竞赛"。作品将根据代码规范性、页面还原度、创新性等多个维度进行评分。</p>
            <p>本次比赛不仅是一次技能比拼，更是展示班级风采、促进同学交流的良好机会。</p>
        </section>


        <section id="csxs">
            <h2>参赛选手</h2>
            <div class="contestants">
                <div class="contestant">
                    <img src="./tp/OIP-C (1).jpg">
                    <h3>张三</h3>
                    <p>前端开发者</p>
                </div>
                <div class="contestant">
                    <img src="./tp/OIP-C (2).jpg">
                    <h3>李四</h3>
                    <p>后端开发者</p>
                </div>
                <div class="contestant">
                    <img src="./tp/OIP-C (3).jpg">
                    <h3>王五</h3>
                    <p>软件测试者</p>
                </div>
                <div class="contestant">
                    <img src="./tp/OIP-C.jpg">
                    <h3>赵六</h3>
                    <p>ui设计者</p>
                </div>
            </div>
        </section>


        <section id="jsgz">
            <h2>竞赛规则</h2>
            <h3>1.代码规范性</h3>
            <ul>
                <li>考生的HTML和CSS代码必须遵循上述规则。</li>
                <li>每违反一条规则,扣1分。</li>
            </ul>

            <h3>2.页面功能完整性</h3>
            <ul>
                <li>页面应包含所有必要的功能模块（如头部、导航栏、主体内容、底部等）。</li>
                <li>缺少任何一个模块,扣10分。</li>
            </ul>

            <h3>3.样式正确性</h3>
            <ul>
                <li>页面的样式应符合设计要求，布局合理，颜色搭配协调。</li>
                <li>样式错误或不符合设计要求,每处扣2分。</li>
            </ul>
            <h3>4.代码可读性</h3>
            <ul>
                <li>代码应具有良好的可读性，包括适当的缩进、换行和注释。</li>
                <li>代码可读性差,扣5分。</li>
            </ul>
            <h3>5.创新性</h3>
            <ul>
                <li>鼓励考生在满足要求的基础上进行创新设计。</li>
                <li>创新设计加分,最高加20分。</li>
            </ul>
        </section>


        <section id="cjzs" class="jl">
            <h2>成绩展示</h2>
            <table>

                <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>代码规范性</th>
                    <th>页面还原度</th>
                    <th>功能完整性</th>
                    <th>创新设计</th>
                    <th>总分</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>38</td>
                    <td>28</td>
                    <td>20</td>
                    <td>8</td>
                    <td>94</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>36</td>
                    <td>27</td>
                    <td>18</td>
                    <td>7</td>
                    <td>88</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>35</td>
                    <td>25</td>
                    <td>19</td>
                    <td>6</td>
                    <td>85</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>32</td>
                    <td>24</td>
                    <td>17</td>
                    <td>5</td>
                    <td>78</td>
                </tr>
            </table>
        </section>
    </main>


    <footer>
        <div class="db">
            <p>班级口号：团结，奋进，拼搏，友善</p>
            <p>制作人:软件技术2405班 王志强</p>
        </div>
    </footer>
</body>

</html>